<template>
  <div class="record">
    <div>
      <div @click="open">
        <mt-field label="起始时间" :readonly="true" placeholder="点击选择时间" :state="startTime==''?'warning':'success'" v-model.trim="startTime"></mt-field>
      </div>
    </div>
    <div @click="open2">
      <mt-field label="结束时间" :readonly="true" placeholder="点击选择时间" :state="endTime==''?'warning':'success'" v-model.trim="endTime"></mt-field>
    </div>
    <div style="margin:10px 10px">
      <mt-button type="primary" size="large" @click.native="search">查找</mt-button>
    </div>
    <div class="shuoming" v-show="showTip">
      <p class="title">
        说明
      </p>
      <p class="title">
        1.起始时间和结束时间必填
      </p>
    </div>
    <div class="showResult lay">
      <div class="showResultTitle"> 查询结果 </div>
      <ti-xian-view :money="item.Money/100" :key="index" v-for="(item,index) in group.arr">
        <div slot="mark">
          <p>提现时间 : <span class="time">{{item.CreateTime}}</span></p>
          <p v-if="item.State==2">到账时间 : <span class="time">{{item.PayDate}}</span></p>
          <p>提现状态 : <span class="error">{{item.State==2?'提现成功':"待处理"}}</span></p>
        </div>
      </ti-xian-view>
      <div v-if=" group.arr.length==0" class="noresult">
        无符合条件的数据
      </div>
      <div v-if=" group.arr.length>0">
        <div style="margin:10px 10px">
          <mt-button type="primary" size="large" @click.native="loadMore" v-if="group.nextPage<group.totalPages">加载更多</mt-button>
          <mt-button type="default" size="large" v-else>已无更多数据</mt-button>
        </div>
      </div>
    </div>
    <mt-datetime-picker v-model.trim="starttime" type="date" ref="picker" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" hourFormat="{value}时" minuteFormat="{value}分" :startDate="startDate" :endDate="endDate" @confirm="handleConfirmS">
    </mt-datetime-picker>
    <mt-datetime-picker v-model.trim="endtime" type="date" ref="pickerend" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" hourFormat="{value}时" minuteFormat="{value}分" :startDate="startDate" :endDate="endDate" @confirm="handleConfirmE">
    </mt-datetime-picker>
    <mt-popup v-model="popupVisible" position="top" :modal="false" pop-transition="popup-fade">
      {{msg}}
    </mt-popup>
  </div>
</template>
<script>
  import {
    DatetimePicker,
    MessageBox
  } from "mint-ui";
  import TiXianView from "../../../components/TixianTable/TixianTable";
  export default {
    name: "record",
    components: {
      TiXianView
    },
    data() {
      return {
        starttime: 0,
        endtime: 0,
        startDate: new Date('2017-01-01'),
        endDate: new Date(),
        startTime: "",
        popupVisible: false,
        endTime: "",
        isLoading: false,
        showTip: false,
        msg: "",
        group: {
          arr: [],
          totalCount: 0,
          nextPage: 0,
          totalPages: 0
        }
      };
    },
    filters: {
      formateDate: function(date) {
        if (date == "" || date == "undefined") {
          return "";
        }
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        h = h < 10 ? "0" + h : h;
        var minute = date.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        return y + "-" + m + "-" + d + " " + h + ":" + minute;
      }
    },
    methods: {
      handleConfirm: function(value) {
        value = this.formateDate(value);
        this.startTime = value;
        //  console.log(value);
      },
      formateDate: function(date) {
        if (date == "" || date == "undefined") {
          return "";
        }
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        h = h < 10 ? "0" + h : h;
        var minute = date.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        return y + "-" + m + "-" + d + " " + h + ":" + minute;
      },
      open: function() {
        this.$refs.picker.open();
      },
      open2: function() {
        this.$refs.pickerend.open();
      },
      handleConfirmS(time) {
        this.starttime = time;
        this.startTime = this.formateTimeObj(time) + " 00:00:00";
      },
      handleConfirmE(time) {
        this.endtime = time;
        this.endTime = this.formateTimeObj(time) + " 23:59:59";
      },
      formateTimeObj: function(obj) {
        let Y = obj.getFullYear();
        let M = obj.getMonth() + 1;
        let D = obj.getDate();
        if (M < 10) {
          M = "0" + M;
        }
        if (D < 10) {
          D = "0" + D;
        }
        return `${Y}-${M}-${D}`;
      },
      loadMore() {
        let getData = {
          params: {
            'functionname': "myreflectrecord",
            body: JSON.stringify({
              startDate: this.startTime,
              endDate: this.endTime,
              pageIndex: this.group.nextPage,
              pageSize: this.PAGESIZE
            })
          }
        }
        //  console.log(getData);
        this.getList(getData);
      },
      getList: function(getData) {
        this.$http.get(`${this.baseUrl}/Main/GetData`, getData).then(response => {
          let data = response.data;
          let arr = data.body;
          let that = this;
          // that.popupVisible = true;
          // that.msg = data.msg;
          // let time = setTimeout(function() {
          //   that.popupVisible = false;
          //   that.msg = "";
          //   clearTimeout(time);
          // }, this.SETTIME);
          if (data.code == 1) {
            if (this.group.totalCount == 0) {
              this.group.nextPage = 1;
              this.group.arr = arr;
            } else if (this.group.totalCount > 0) {
              this.group.arr = this.group.arr.concat(arr);
              this.group.nextPage = this.group.nextPage + 1;
            }
            this.group.totalPages = Math.ceil(data.totalCount / this.PAGESIZE);
            this.group.totalCount = data.totalCount;
          } else {
            MessageBox("提示", data.msg)
          }
        })
      },
      search() {
        this.group.totalCount = 0;
        this.group.nextPage = 0;
        if (this.startTime == "") {
          MessageBox('提示', '起始时间不能为空');
          return false;
        }
        if (this.endTime == "") {
          MessageBox('提示', '结束不能为空');
          return false;
        }
        let getData = {
          params: {
            'functionname': "myreflectrecord",
            body: JSON.stringify({
              startDate: this.startTime,
              endDate: this.endTime,
              pageIndex: this.group.nextPage,
              pageSize: this.PAGESIZE,
            })
          }
        }
        // console.log(getData);
        this.getList(getData)
      },
      initView() {
        let getData = {
          params: {
            'functionname': "myreflectrecord",
            body: JSON.stringify({
              startDate: "",
              endDate: "",
              pageIndex: this.group.nextPage,
              pageSize: this.PAGESIZE,
            })
          }
        }
        // console.log(getData);
        this.getList(getData)
      },
      toPath(pathID) {
        this.$router.push({
          path: `/check/detail/${pathID}`
        })
      }
    },
    created() {
      this.initView()
    }
  };
</script>
<style lang="scss" scoped>
  .mint-popup.mint-datetime {
    z-index: 999999;
  }
  .content {
    padding: 15px;
  }
  .loadMore.disabled {
    background: #9e9e9e;
  }
</style>


